<template>
  <view class="venue-detail-container">

	<my-navbar leftText="详情" leftIcon="arrow-left" :custom="false" bgColor="#ffffff" :autoBack="true"
				leftIconSize="40" />

    <!-- 场景大宣传图片 -->
    <!-- <image class="venue-img" :src="venueDetailMsg.imageList[0].imageurl" mode="widthFix"></image> -->
	<image class="venue-img" :src="venueDetailMsg.bigImageList[0].imageurl"></image>
	
	<!-- 场景滑动图片区域 -->
	    <view class="scene-section">
	      <text class="section-title">场景</text>
	      <view class="img-scroll" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" ref="scrollContainer">
	        <view class="img-list" :style="{ transform: `translateX(${translateX}px)` }">
	          <image 
	            class="scene-img" 
	            v-for="(img, index) in venueDetailMsg.imageList" 
	            :key="index" 
	            :src="img.imageurl" 
	            mode="cover" 
	          ></image>
	        </view>
	      </view>
	    </view>

    <!-- 场馆基本信息 -->
    <view class="basic-info">
      <view class="name-row">
        <text class="venue-name">{{venueDetailMsg.eventtitle}}</text>
        <u-icon name="coupon" size="20" color="#007AFF"></u-icon>
        <u-icon name="star" size="24" class="star-icon" @click="toggleFavorite"></u-icon>
      </view>
      <!-- <view class="rating">
        <u-icon name="fire" color="#FF7A00" size="20" v-for="(item, index) in 4" :key="index"></u-icon>
        <u-icon name="fire" color="#CCCCCC" size="20"></u-icon>
      </view> -->
		<view class="address-container">
			<text class="address">{{venueDetailMsg.detailedaddress}}</text>
			<u-icon name="phone" size="24" class="phone-icon" @click="makeCall"></u-icon>			
	  </view>
    </view>

    <!-- 广告横幅 -->
    <!-- <image class="ad-banner" src="/static/index/vipCard.png" mode="widthFix" @click="viewAdDetails"></image> -->

    <!-- 内容说明提示 -->
    <view class="tip-section">
      <text class="tip-title">内容提示：</text>
	  <!-- <div v-html="venueDetailMsg.eventcontent" class="tip-content"></div> -->
	   <!-- 显示区域：转换换行符后渲染 -->
		<div class="display" v-html="formattedContent"></div>
    </view>

    <!-- 可预订项目 -->
    <!-- <view class="item-section">
      <view class="item-title">
        <text>脉冲台球（益江路店）-台球</text>
        <text class="expand" @click="toggleExpand">展开</text>
      </view>
    </view> -->

    <!-- 日期和预订 -->
    <view class="date-book">
      <view class="date-info">
        <text class="week">活动时间</text>
        <text class="date">{{venueDetailMsg.starttime}}~{{venueDetailMsg.endtime}}</text>
      </view>
      <text class="remain">{{venueDetailMsg.groupsize}}</text>
    </view>

    <!-- 底部反馈 -->
    <!-- 我要加入按钮 -->
		<button class="book-btn" @click="goToBook(venueDetailMsg)">我要加入</button>
  </view>
</template>

<script>
export default {
	computed: {
	    // 计算属性：将换行符\n转为<br>
	    formattedContent() {
	      if (!this.venueDetailMsg.eventcontent) return '';
	      // 替换所有换行符为<br>，兼容多端
	      return this.venueDetailMsg.eventcontent.replace(/\n/g, '<br/>');
	    }
	  },
  data() {
    return {
		venueDetailMsg:{},
      isFavorite: false, // 是否收藏
      isExpanded: false ,// 项目是否展开
	  sceneImgs: [], // 场景图片列表
		startX: 0, // 触摸开始的X坐标
		moveX: 0, // 触摸移动的X坐标
		translateX: 0, // 图片容器的平移量
		imgWidth: 420, // 与样式中scene-img的width保持一致（rpx）
		imgGap: 16,    // 与样式中margin-right保持一致（rpx）
		visibleCount: 0, // 可见区域能显示的图片数量
		maxTranslateX: 0, // 最大可滑动距离（负值）
			
		// 可在此处定义二维码图片路径变量，便于维护
		wechatQrcode: '/static/images/wechat_qrcode.png',
		alipayQrcode: '/static/images/alipay_qrcode.png'
	  
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
	// 计算可见区域能显示的图片数量
	    calculateVisibleCount() {
	      // 获取滚动容器宽度（rpx）
	      const containerWidth = uni.getSystemInfoSync().windowWidth * 2; // 转换为rpx（1px=2rpx）
	      // 单张图片总宽度（图片宽+间距）
	      const singleImgTotalWidth = this.imgWidth + this.imgGap;
	      // 计算可见数量（向下取整）
	      this.visibleCount = Math.floor(containerWidth / singleImgTotalWidth);
	      // 计算最大可滑动距离（负值）
	      const totalImg = this.venueDetailMsg.imageList?.length || 0;
	      this.maxTranslateX = Math.max(0, totalImg - this.visibleCount) * singleImgTotalWidth;
	    },
		touchStart(e) {
		      this.startX = e.touches[0].clientX;
		    },
		    touchMove(e) {
		      this.moveX = e.touches[0].clientX;
		    },
		    touchEnd() {
		      const totalImg = this.venueDetailMsg.imageList?.length || 0;
		      if (totalImg <= this.visibleCount) return; // 图片数量小于等于可见数量时不滑动
		
		      const moveDistance = this.moveX - this.startX;
		      const singleStep = this.imgWidth + this.imgGap; // 每次滑动一张的距离
		
		      // 从右往左滑（上一张）
		      if (moveDistance < -50) { // 增加最小滑动距离阈值，防止误触
		        const newTranslateX = this.translateX - singleStep;
		        this.translateX = Math.max(-this.maxTranslateX, newTranslateX);
		      }
		      // 从左往右滑（下一张）
		      else if (moveDistance > 50) { // 增加最小滑动距离阈值
		        const newTranslateX = this.translateX + singleStep;
		        this.translateX = Math.min(0, newTranslateX);
		      }
		    },
	
    toggleFavorite() {
      this.isFavorite = !this.isFavorite;
      // 这里可以添加收藏相关的接口请求逻辑
    },
    contactService() {
      // 联系客服逻辑
      uni.showToast({
        title: '联系客服功能待开发',
        icon: 'none'
      });
    },
    makeCall() {
      // 拨打电话逻辑
      uni.makePhoneCall({
        phoneNumber: '13800138000' // 示例电话号码
      });
    },
    viewAdDetails() {
      // 查看广告详情逻辑
      uni.navigateTo({
        url: '/pages/adDetail/adDetail'
      });
    },
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
      // 展开更多项目逻辑
    },
    goToBook(venueDetailMsg) {
      // 前往预订页面逻辑
	  // 序列化 + 编码（关键：避免特殊字符截断）
	  const jsonStr = encodeURIComponent(JSON.stringify(venueDetailMsg));
      uni.navigateTo({
        url: '/other_pages/venueDetail/reserver?queryObj='+jsonStr
      });
    },
    goToSuggest() {
      // 前往意见建议页面逻辑
      uni.navigateTo({
        url: '/pages/suggest/suggest'
      });
    },
    goToFeedback() {
      // 前往运营反馈页面逻辑
      uni.navigateTo({
        url: '/pages/feedback/feedback'
      });
    },
	onLoad(options) { // options 包含路由传递的所有参数
	    // 1. 接收参数（options.参数名 对应传递时的 key）
		console.log(options.queryObj);
	    const jsonStr = decodeURIComponent(options.queryObj);
	    
	    // 2. 反序列化还原为 JSON 对象
	    this.venueDetailMsg = JSON.parse(jsonStr);
	    
	    // 3. 验证结果（可根据实际需求处理）
	    console.log("接收的 JSON 对象：", this.venueDetailMsg);
	    // 输出示例：{ id: 123, name: "张三", tags: ["学生", "运动爱好者"], ... }
		// 4. 定义所有可能的分隔符：中文逗号、英文逗号、分号（可根据实际需求补充）
		const separatorReg = /[,，;]/;
		      
		// 5. 按分隔符拆分字符串 → 得到原始拆分数组（含可能的空值/乱码）
		// this.sceneImgs = this.venueDetailMsg.imageList[1].imageurl.split(separatorReg);
		// console.log(this.sceneImgs)
		
		// 延迟计算，确保DOM渲染完成
		    setTimeout(() => {
		      this.calculateVisibleCount();
		    }, 100);
	  }
  }
};
</script>

<style scoped>
.venue-detail-container {
  background-color: #fff;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 40rpx;
  border-bottom: 1px solid #eee;
}

.back {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
}

.right-icons {
  display: flex;
  align-items: center;
}

.scan-icon {
  margin-left: 24rpx;
}

.venue-img {
  width: 100%;
    height: 450rpx; /* 固定宽高比（如 3:2） */
    overflow: hidden; /* 配合裁剪模式，隐藏超出容器的部分 */
    border-radius: 8rpx; /* 圆角容器 */
}

.scene-section {
  padding: 0 24rpx 24rpx; /* 增加底部内边距，与下方内容分隔 */
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  margin: 16rpx 24rpx;
}

.img-scroll {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
}

.img-list {
  display: inline-flex;
  transition: transform 0.3s ease;
}

.scene-img {
  width: 420rpx;
  height: 300rpx;
  margin-right: 16rpx;
  border-radius: 12rpx; /* 增加圆角，提升视觉效果 */
  object-fit: cover; 
}

.basic-info {
  padding: 24rpx;
}

.name-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.venue-name {
  font-size: 30rpx;
  font-weight: bold;
  margin-right: 12rpx;
}

.star-icon {
  margin-left: auto;
}

.rating {
  display: flex;
  margin-bottom: 16rpx;
}

.address-container {
  display: flex; /* 使用弹性布局 */
  align-items: center; /* 垂直居中对齐 */
}

.address {
	flex: 1; /* 让文字部分尽可能占据剩余空间 */
  font-size: 32rpx;
  color: #666;
  margin-bottom: 16rpx;
  display: block;
}

.phone-icon {
  margin-left: 7rpx; /* 给图标和文字之间留些间距 */
  font-size: 32rpx;
  margin-bottom: 16rpx;
  color: #999;
}

.contact-icons {
  display: flex;
  justify-content: flex-end;
}

.contact-icons u-icon {
  margin-left: 24rpx;
}

.ad-banner {
  width: 100%;
  margin-bottom: 24rpx;
}

.tip-section {
  padding: 0 24rpx 24rpx 24rpx;
  display: block;
  align-items: center
}

.tip-title {
  font-size: 28rpx;
  display: block; /* 让“内容提示：”单独占一行 */
    font-weight: bold; /* 可选，让标题更突出 */
    margin-bottom: 5px; /* 与下方内容留些间距 */
}

.tip-content {
  font-size: 26rpx;
  color: #666;
  /* line-height: 1.5; */
  display: block; /* 让提示内容单独占一行 */
    line-height: 1.5; /* 可选，调整行高，增强可读性 */
}

.item-section {
  padding: 0 24rpx 24rpx 24rpx;
}

.item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
}

.expand {
  color: #007AFF;
}

.date-book {
  padding: 0 24rpx 24rpx 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.week {
  font-size: 30rpx;
  font-weight: bold;
}

.date {
  font-size: 26rpx;
  color: #666;
  margin-top: 4rpx;
  display: block;
}

.remain {
  font-size: 26rpx;
  color: #666;
}

.book-btn {
  background-color: #007AFF;
  color: #fff;
  padding: 12rpx 32rpx;
  border-radius: 32rpx;
  font-size: 28rpx;
}

.feedback {
  display: flex;
  justify-content: space-around;
  padding: 24rpx;
  border-top: 1px solid #eee;
}

.feedback-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feedback-item text {
  margin-top: 8rpx;
  font-size: 26rpx;
}
</style>